<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:主机配置详情组件
* @fileName:host-details.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-8
!-->
<script setup lang="ts">
import { reactive, ref } from "vue";
import HostEditor from "./drawer/host-editor.vue";
//判断显隐过滤器
import { showTooltip } from "@/common/util/tooltip";
//引入切图
import edit from "@/assets/img/host-config/edit.png";
import { showErrorMessage, showSuccessMessage } from "@/common/message";
//引入匹配
import StateEnum from "@/common/enum/state-enum";
//引入调用接口方法
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
//接收父组件传值
const props = defineProps({
  listData: Array as any,
  deleteFunc: Function as any,
  fresFunc: Function as any,
  dataShow: Boolean as any,
  // 数据列表加载动画
  isListLoading: {
    type: Boolean,
    default: false,
  },
});
//控制新增弹窗显隐
const editdrawershow = ref(false);
const editdirection = ref("rtl");
let editItem = reactive({
  list: [] as any,
});

/**
 * @description:截取空格前的字符串
 * @param {String} str
 * @return {String} str
 */
const getValue = (str: String) => {
  let num = str.indexOf(" ");
  return str.substring(0, num);
};

/**
 * @description:删除函数
 * @param {any} item
 * @return void
 */
const handleDelete = (item: any) => {
  const res = proxy.$HTTP.delete({
    url: `/resource/server/${item.id}`,
  });
  res.then((res: any) => {
    if (res.isOk) {
      props.deleteFunc(res.isOk);
      showSuccessMessage({
        message: "删除成功",
      });
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};

/**
 * @description:编辑弹窗传值函数
 * @param {any} item
 * @return void
 */
const handleEditFunc = (item: any) => {
  editdrawershow.value = false;
  props.fresFunc(item);
};

/**
 * @description:编辑函数
 * @param {any} item
 * @return void
 */
const handleEdit = (item: any) => {
  editItem.list = item;
  editdrawershow.value = true;
};
</script>

<template>
  <div class="page-details" v-loading="props.isListLoading">
    <div
      v-for="(item, index) in props.listData"
      v-if="props.dataShow === true && props.isListLoading === false"
      :key="index"
      class="Rowcol"
    >
      <el-card :body-style="{ padding: '0px', height: '120px' }">
        <div class="cardMain">
          <div
            class="cardLabelTrue"
            v-if="item.status === StateEnum.Success.getValue()"
          >
            <span>正常</span>
          </div>
          <div
            class="cardLabelFalse"
            v-if="item.status === StateEnum.Error.getValue()"
          >
            <span>异常</span>
          </div>
          <el-tooltip
            class="box-item"
            transition="none"
            :hide-after="0"
            :content="item.serverName"
            :disabled="showTooltip(item.serverName, 200)"
            placement="top"
          >
            <div class="cardTitle">{{ item.serverName }}</div>
          </el-tooltip>

          <div class="cardContent">{{ item.serverIp }}</div>
          <div class="bottom">
            <div class="user">
              <el-tooltip
                class="box-item"
                transition="none"
                :hide-after="0"
                :content="item.createId"
                :disabled="showTooltip(item.createId, 70)"
                placement="top"
              >
                <div class="username">{{ item.createId }}</div>
              </el-tooltip>
              <div class="usercontent">
                {{ getValue(item.createTime) }}&nbsp;创建
              </div>
            </div>
            <div class="edit">
              <el-tooltip
                class="box-item"
                content="编辑"
                transition="none"
                :hide-after="0"
                placement="top"
              >
                <img
                  :src="edit"
                  alt=""
                  width="14"
                  height="14"
                  @click="handleEdit(item)"
                />
              </el-tooltip>
            </div>
            <div class="delete">
              <span class="operation">
                <lanius-pop-confirm
                  title="删除提示"
                  :content="'确定删除' + item.serverName + '?'"
                  @confirm="handleDelete(item)"
                >
                  <div style="display: inline">
                    <el-tooltip
                      content="删除"
                      placement="top"
                      transition="none"
                      :hide-after="0"
                    >
                      <img
                        src="@/assets/img/common/delete.png"
                        width="14"
                        height="14"
                      />
                    </el-tooltip>
                  </div>
                </lanius-pop-confirm>
              </span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div v-if="props.dataShow === false && props.isListLoading === false">
      <el-empty description="暂无数据" />
    </div>
  </div>
  <el-dialog
    v-model="editdrawershow"
    v-if="editdrawershow"
    title="编辑"
    :width="740"
    :direction="editdirection"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!-- 编辑弹窗 -->
    <host-editor
      :handleEditFunc="handleEditFunc"
      :editItem="editItem.list"
    ></host-editor>
  </el-dialog>
</template>

<style scoped lang="scss">
:deeep(.el-card__body) {
  height: 120px !important;
}
::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 0px;
  transition: all 0.2s ease-in-out;
}
::-webkit-scrollbar-track {
  border-radius: 0px;
}
.page-details {
  margin-top: 15px;
  width: 100%;
  overflow-x: hidden;
  height: 78vh;
  .Rowcol {
    width: 312px;
    height: 120px;
    background-color: #ffffff;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;

    .cardMain {
      font-family: PingFang SC;
      font-weight: 700;
      padding-left: 15px;
      padding-right: 15px;
      height: 120px !important;
      color: #000000;
      position: relative;
      font-size: 18px;
      .cardLabelTrue {
        position: absolute;
        right: -30px;
        top: 15px;
        width: 125px;
        height: 30px;
        line-height: 30px;
        background: rgba(85, 214, 107, 1);
        font-family: PingFang SC;
        font-weight: 700;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        transform: rotate(45deg);
      }
      .cardLabelFalse {
        position: absolute;
        right: -30px;
        top: 15px;
        width: 125px;
        height: 30px;
        line-height: 30px;
        background: rgba(255, 155, 23, 1);
        font-family: PingFang SC;
        font-weight: 700;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        transform: rotate(45deg);
      }
      .cardTitle {
        width: 216px;
        height: 40px;
        line-height: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: PingFang SC;
        font-weight: 700;
        color: #000000;
        font-size: 18px;
      }
      .cardContent {
        opacity: 50%;
        height: 40px;
        width: 216px;
        line-height: 40px;
        word-wrap: break-word;
        font-family: PingFang SC;
        font-weight: 700;
        color: #000000;
        font-size: 14px;
      }
      .bottom {
        margin-top: 13px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .delete {
          cursor: pointer;
          width: 20px;
          text-align: center;
          line-height: 20px;
          height: 20px;
          background-color: #f2f2f6;
          border-radius: 10px;
        }
        .edit {
          cursor: pointer;
          width: 20px;
          text-align: center;
          line-height: 20px;
          height: 20px;
          background-color: #f2f2f6;
          border-radius: 10px;
        }
        .user {
          font-family: PingFang SC;
          font-weight: 700;
          color: #000000;
          width: 230px;
          font-size: 14px;
          .username {
            width: 75px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            float: left;
          }
          .usercontent {
            margin-left: 10px;
            float: left;
          }
        }
      }
    }
  }
}
</style>
